<template>
    <div id="log-list" v-loading="loadingPrdList">
        <el-form :inline="true" class="demo-form-inline clear" size="small">
            <el-form-item label="产品名称">
                <el-input v-model="productLogFormInline.productName" ></el-input>
            </el-form-item>
            <el-form-item label="操作时间" class="order-time">
                <el-row>
                    <el-col :span="11" class="time-width">
                        <el-date-picker
                                v-model="productLogFormInline.beginCreateTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="00:00:00">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="1" class="time-span">~</el-col>
                    <el-col :span="11" class="time-width">
                        <el-date-picker
                                v-model="productLogFormInline.endCreateTime"
                                type="datetime"
                                placeholder="选择日期时间"
                                default-time="23:59:59">
                        </el-date-picker>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="操作人">
                <el-input v-model="productLogFormInline.userName"></el-input>
            </el-form-item>
            <el-button type="primary" size="small" @click="getProductLogList">搜索</el-button>
        </el-form>

        <el-table
                class="style-a"
                :data="tableData"
                size="small"
                border
                style="width:100%">
            <el-table-column
                    label="产品ID"
                    align="center"
                    prop="productId"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="产品名称"
                    align="center"
                    prop="productName"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="操作时间"
                    align="center"
                    prop="createTime"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="操作人"
                    align="center"
                    prop="userName"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="操作内容"
                    align="center"
                    prop="content"
                    width="">
                <template slot-scope="scope">
                    <p v-html="scope.row.content"></p>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="20"
                layout="total, prev, pager, next, jumper"
                :total="totalSize">
        </el-pagination>
    </div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { getProductLogList } from '@/api/productLogList'
	import moment from 'moment'

	export default {
		computed: {
			...mapGetters([
				'name',
				'roles'
			])
		},
		data() {
			return {
				tableData: [],
				loadingPrdList: false,
				totalSize: null,
				currentPage: 1,
				// 查询条件
				productLogFormInline: {
					productName: '',
					beginCreateTime: null,
					endCreateTime: null,
					userName: ''
				}

			}
		},
		created() {
			this.getProductLogList()
		},
		methods: {
			getProductLogList() {
				var beginCreateTime = this.productLogFormInline.beginCreateTime
				var endCreateTime = this.productLogFormInline.endCreateTime
				if (beginCreateTime) {
					beginCreateTime = moment(beginCreateTime).format('YYYY-MM-DD HH:mm:ss')
				}
				if (endCreateTime) {
					endCreateTime = moment(endCreateTime).format('YYYY-MM-DD HH:mm:ss')
				}
				let params = {
					pageSize: 20,
					pageNumber: this.currentPage,
					productName: this.productLogFormInline.productName,
					userName: this.productLogFormInline.userName,
					beginCreateTime: beginCreateTime,
					endCreateTime: endCreateTime
				}

				this.loadingPrdList = true
				getProductLogList(params).then(res => {
					let data = res.data
					this.loadingPrdList = false
					if (data.errorCode === 'E_000') {
						this.tableData = data.body.list
						this.totalSize = data.body.total
					}
				}).catch(() => {
					this.loadingPrdList = false
				})
			},

			// 后台账号列表翻页
			handleCurrentChange(val) {
				this.currentPage = val
				this.getProductLogList()
			}

		}
	}
</script>

<style rel="stylesheet/scss" lang="scss">
    #log-list{
        .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
            margin-bottom: 8px;
        }
        .order-time{
            .el-form-item__content{
                width: 480px;
            }
            .time-width{
                width: 220px;
            }
            .time-span{
                text-align: center;
            }
        }
    }
</style>
